<template>
  <div>
    <!-- $nextTick -->
    <!-- 将回调延迟到下次DOM更新循环后执行，在修改数据之后立即使用这个方法，获取更新后的 DOM。 -->
    NextTickDemo
    <p ref="name">{{name}}</p>
    <button @click="changeName">changeName</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Aaron'
    }
  },
  methods: {
    changeName() {
      this.name = 'Aaron2';
      console.log(this.$refs.name.innerText);
      this.$nextTick(() => {
        console.log(this.$refs.name.innerText);
      })
    }
  }
}
</script>